<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/" style="height:10px;">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>客房管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
      
       <el-form :inline="true" :model="guestVo" class="demo-form-inline">
        
        <el-form-item label="房间分类">
          <el-select v-model="guestVo.roomname" placeholder="请选择房间分类">
            <el-option v-for="(room,index) in roomnamestring" :key="index" :label="room" :value="room"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="房间状态">
          <el-select v-model="guestVo.state" placeholder="请选择房间状态">
            <el-option label="空房" value="0"></el-option>
            <el-option label="已预订" value="1"></el-option>
            <el-option label="已入住" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="chaxun">查询</el-button>
          <el-button  type="success"  @click="addGuestFn">添加房间</el-button>
        </el-form-item>
      </el-form>
      <el-table
      :data="pageinfo.list"
      border
      :row-style="tableRowStyle"
      :header-cell-style="tableHeaderColor"
      style="width: 100%;">
      <el-table-column
        prop="roomnumber"
        label="房间号"
        width="100">
      </el-table-column>

      <el-table-column
        prop="floor"
        label="房间楼层"
        width="150">
      </el-table-column>

      <el-table-column label="房间图片" width="180">
        <template slot-scope="scope">
          <img :src="require('../../assets/bed/'+scope.row.roomimg)" alt="" style="width:50%;height:50%;">
        </template>
      </el-table-column>

      <el-table-column
        prop="roommiao"
        label="房间描述"
        width="150">
      </el-table-column>

      <el-table-column
        prop="roomname"
        label="房间类别"
        width="180">
      </el-table-column>

      <el-table-column
        prop="roommoney"
        label="房间价格"
        width="180">
      </el-table-column>

      <el-table-column label="状态" width="120">
        <template slot-scope="scope">
          {{scope.row.state == 0 ? '空房':scope.row.state == 1 ? "已预订" : "已入住"}}
        </template>
      </el-table-column>

      <el-table-column label="管理操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="checkoutFn(scope.row.state,scope.row.rid)">客户退房</el-button>
            <el-button
            size="mini"
            type="danger"
            @click="deleteGuestFn(scope.row.state,scope.row.rid)">删除房间</el-button>
        </template>
        </el-table-column>
    </el-table>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="guestVo.pageNum"
      :page-sizes="[5, 7, 10, 15]"
      :page-size="guestVo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageinfo.total">
    </el-pagination>

    <el-dialog
      title="添加客房"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="form" :model="guest" label-width="80px">
        <el-form-item label="房间号">
          <el-input v-model="guest.roomnumber"></el-input>
        </el-form-item>
        
        <el-form-item label="楼层">
          <el-select v-model="guest.floor" placeholder="请选择楼层">
            <el-option label="1层" value="1层"></el-option>
            <el-option label="2层" value="2层"></el-option>
            <el-option label="3层" value="3层"></el-option>
            <el-option label="4层" value="4层"></el-option>
            <el-option label="5层" value="5层"></el-option>
            <el-option label="6层" value="6层"></el-option>
            <el-option label="7层" value="7层"></el-option>
            <el-option label="8层" value="8层"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="房间分类">
          <el-select v-model="guest.roomname" placeholder="请选择房间分类">
            <el-option v-for="(room,index) in roomnamestring" :key="index" :label="room" :value="room"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="房间状态">
          <el-select v-model="guest.state" placeholder="请选择房间状态">
            <el-option label="空房" value="0"></el-option>
            <el-option label="已预订" value="1"></el-option>
            <el-option label="已入住" value="2"></el-option>
          </el-select>
        </el-form-item>
        

      </el-form>
      

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGuestFn1">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {findAllGuest,findAllGuestByAdd,addGuest,checkoutGuest,deleteGuest} from '../../api'
export default {
  data() {
    return {
      pageinfo : {}  ,
      guestVo : {
        pageNum : 1,
        pageSize : 5
      } ,
      dialogVisible : false,
      guest : {
        state : ''
      },
      roomnamestring : []
    }
  },
  async created() {
    this.findAll()
    
    let {data:baseRefault} = await findAllGuestByAdd()
    this.roomnamestring = baseRefault.data
  },
  methods: {
    //设置表格行的样式
    tableRowStyle({row,rowIndex}){
        return 'background-color:pink;font-size:15px;'
    },
    //设置表头行的样式
    tableHeaderColor({row,column,rowIndex,columnIndex}){
        return 'background-color:lightblue;color:#fff;font-wight:500;font-size:20px;text-align:center'
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.guestVo.pageNum = 1
      this.guestVo.pageSize = val
      this.findAll()
    },
    handleCurrentChange(val) {
      this.guestVo.pageNum = val
      console.log(`当前页: ${val}`);
      this.findAll()
    },
    async findAll(){
      let {data:baseRefault} = await findAllGuest(this.guestVo)
      this.pageinfo = baseRefault.data
    },
    addGuestFn(){
      var staffname = sessionStorage.getItem('staffid')
      if(staffname == 'admin'){
         this.dialogVisible = true
      }else{
        this.$message.error('您无权添加房间操作！请联系管理员！')
      }
     
    },
    async addGuestFn1(){
      let {data:baseRefault} = await addGuest(this.guest)
      this.$message.success(baseRefault.message)
      this.dialogVisible = false
    },
    chaxun(){
      this.findAll()
    },
    //退房
    checkoutFn(state,rid){
        if(state ==0 || state == 1){
          this.$message.error('您无权客户退房操作！请联系管理员！')
        }else{
          this.$confirm('确定退房, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
             //退房间
              let {data:baseRefault} = await checkoutGuest(rid)
              this.$message.success(baseRefault.message)
              this.findAll()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消退房'
            });          
          });
        }
    },
    //删除房间
    async deleteGuestFn(state,rid){
      var staffname = sessionStorage.getItem('staffid')
      if(staffname == 'admin'){
        if(state == 2){
        this.$message.error('操作失败')
        }else{
          this.$confirm('删除房间, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
              let {data:baseRefault} = await deleteGuest(rid)
              this.$message.success(baseRefault.message)
              this.findAll()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除房间'
            });          
          });
        }
      }else{
        this.$message.error('您无权注销房间操作！请联系管理员！')
      }
      
    }
  },
}
</script>

<style>
el-table {
    text-align: center
}
el-table-column{
  text-align: center
}
</style>